<template>
	<div class="face_waterfall_list">
		<div class="search">
			<el-input placeholder="请输入内容" v-model="queryData.name"></el-input>
			<el-button type="warning" icon="el-icon-search">检索人脸</el-button>
		</div>
		<el-scrollbar v-if="faceList.length > 0">
			<waterfall :list="faceList" :gutter="16" :breakpoints="breakpoints">
				<template v-slot:item="{ item, url, index }">
					<div class="box" @contextmenu="handleContextMenu($event, item)" @click="handleClickFace(item)">
						<lazy-img :url="url" />
						<h4 v-if="!!item.name">{{ item.name }}</h4>
					</div>
				</template>
			</waterfall>
			<div class="button">
				<el-button type="text" :loading="loading" :disabled="isAllLoad" @click="handleLoadMore()">{{ loadBtnText }}</el-button>
			</div>
		</el-scrollbar>
		<div class="empty" v-else-if="!isFirst">
			<el-empty :image-size="200" description="暂无人脸数据"></el-empty>
		</div>
		<face-drawer v-model="drawerVisible" :data="faceData"></face-drawer>
	</div>
</template>

<script>
import faceDrawer from './source';
import faceDatas from './faceDatas';
import 'vue-waterfall-plugin/dist/style.css';
import { getAiFaceList } from '@/api/aiApi/aiFace';
import { LazyImg, Waterfall } from 'vue-waterfall-plugin';
export default {
	components: { LazyImg, Waterfall, faceDrawer },
	data() {
		return {
			isFirst: true,
			loading: false,
			faceList: [],
			dataCount: 231,
			queryData: { page: 1, size: 36, source_type: 'nas' },
			drawerVisible: false,
			faceData: {}
		};
	},
	computed: {
		breakpoints() {
			return {
				1920: { rowPerView: 8 },
				1600: { rowPerView: 7 },
				1366: { rowPerView: 6 },
				1200: { rowPerView: 5 },
				992: { rowPerView: 4 },
				800: { rowPerView: 3 },
				640: { rowPerView: 2 },
				480: { rowPerView: 1 }
			};
		},
		isAllLoad() {
			let curNum = this.queryData.page * this.queryData.size;
			return curNum >= this.dataCount;
		},
		loadBtnText() {
			if (this.loading) {
				return '人脸数据加载中';
			} else if (!this.isAllLoad) {
				return '加载更多人脸数据';
			} else {
				return '已无更多人脸数据';
			}
		}
	},
	mounted() {
		this.queryFaceListData();
	},
	methods: {
		//获取人脸数据
		async getFaceListData() {
			let params = { ...this.queryData };
			let timer = setTimeout(() => {
				let page = this.queryData.page;
				let size = this.queryData.size;
				let faceList = faceDatas.filter((n, i) => {
					return (page - 1) * size <= i && i < page * size;
				});
				this.faceList = [...this.faceList, ...faceList];
				this.loading = false;
				this.isFirst = false;
				clearTimeout(timer);
			}, 500);
			/* let result = await getAiFaceList(params); */
		},

		//查询人脸数据
		queryFaceListData() {
			this.loading = true;
			this.getFaceListData();
		},

		//点击加载更多
		handleLoadMore() {
			this.queryData.page++;
			this.queryFaceListData();
		},

		handleClickFace(data) {
			this.faceData = { ...data };
			this.drawerVisible = true;
			this.$memory.set('faceData', data);
		},

		handleContextMenu(event, data) {
			event.preventDefault();
			this.$contextmenu({
				event,
				minWidth: 80,
				customClass: 'resource_context_menu',
				items: this.contextMenuEvent(data)
			});
		},

		contextMenuEvent(data) {
			let that = this;
			return [
				{
					icon: 'el-icon-edit',
					label: '重命名',
					onClick() {
						console.log(that.$memory.get('faceData'));
						console.log(data);
					}
				}
			];
		},

		handleAfterRender() {
			console.log('123123');
		}
	}
};
</script>

<style lang="scss" scoped>
.face_waterfall_list::v-deep {
	display: flex;
	flex-direction: column;
	height: 100%;
	overflow: hidden;
	.search {
		display: flex;
		padding: 16px;
		border-bottom: solid 1px #ebeef5;
		.el-input {
			font-size: 16px;
		}
		.el-input__inner {
			height: 100%;
		}
		.el-button {
			margin-left: 10px;
			font-size: 18px;
		}
	}
	.el-scrollbar {
		flex: 1;
		padding-bottom: 16px;
		overflow: hidden;
		.box {
			cursor: pointer;
			overflow: hidden;
			overflow-y: auto;
			border-radius: 4px;
			border: solid 1px #ebeef5;
		}
		h4 {
			display: -webkit-box;
			margin: 8px 10px;
			font-weight: normal;
			word-break: break-all;
			text-overflow: ellipsis;
			overflow: hidden;
			-webkit-line-clamp: 2;
			-webkit-box-orient: vertical;
		}
		.button {
			text-align: center;
		}
		.el-button {
			padding: 0;
		}
		.is-horizontal {
			display: none;
		}
		.el-scrollbar__wrap {
			overflow: auto;
		}
	}
	.empty {
		display: flex;
		align-items: center;
		justify-content: center;
		overflow: hidden;
		flex: 1;
		color: #c0c4cc;
	}
}
</style>
